<!--  -->
<template>
<div class=''>
    <div>
        <el-button type="success" @click="addSpareUse">新增</el-button>
        <el-button @click="deleteBatch">删除</el-button>
        <el-button>审核</el-button>
        <div style="margin-left: 720px;margin-top: -30px">
            <el-input v-model="spareUseFrom.codeName" placeholder="请输入领用单号或领用主题" style="width: 230px;margin-left: 300px">
                <i slot="append" class="el-input__icon el-icon-search" style="height: 20px;line-height: 20px;width: 10px" @click="selAllSpareUse"></i>
            </el-input>
            <i class="el-icon-menu" style="margin-left: 3px;margin-top: 3px;height: 30px;width: 30px;color: #C7CDD9" @click="showSpare = true"></i>
        </div>
    </div>
    <div style="margin-top: 30px">
        <!--表格-->
        <el-table :data="spareUseData" style="width: 80%" @selection-change="spareUseSelection">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column prop="spId" label="序号"  align="center" width="50px"></el-table-column>
            <el-table-column prop="spUsecode" label="领用单号"  align="center" width="180px"></el-table-column>
            <el-table-column prop="spUsetheme" label="领用主题"  align="center" width="180px"></el-table-column>
            <el-table-column label="领用类型"  align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.useType === 2">设备维修</span>
                    <span v-if="scope.row.useType === 1">设备保养</span>
                </template>
            </el-table-column>
            <el-table-column prop="workType" label="工单类型"  align="center" width="90px">
                <template slot-scope="scope">
                    <span v-if="scope.row.workType === 2">设备维修</span>
                    <span v-if="scope.row.workType === 1">设备保养</span>
                </template>
            </el-table-column>
            <el-table-column prop="workCode" label="关联单号"  align="center" width="180px" ></el-table-column>
            <el-table-column prop="createTime" label="申请时间"  align="center" width="120px"></el-table-column>
            <el-table-column label="审核状态"  align="center" width="80px">
                <template slot-scope="scope">
                    <span v-if="scope.row.useAudit === 1">待审核</span>
                    <span v-if="scope.row.useAudit === 2">驳回</span>
                    <span v-if="scope.row.useAudit === 3">通过</span>
                </template>
            </el-table-column>
            <el-table-column prop="useApplicantName" label="领用申请人"  align="center" width="80px"></el-table-column>
            <el-table-column prop="useDepartment" label="所在部门"  align="center" width="80px"></el-table-column>
            <el-table-column prop="updateTime" label="操作时间"  align="center" width="120px"></el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination
                :current-page.sync="spareUseFrom.page"
                :page-size="spareUseFrom.pagesize"
                :page-sizes="[10, 20, 30, 40]"
                :total="total"
                background
                layout="total, sizes ,prev, pager, next, jumper"
                style="padding: 30px 0;margin-left: 360px"
                @current-change="selAllSpareUse"
                @size-change="handleSizeChanges"
        />
    </div>
    <!--弹出层模糊查信息-->
    <div v-if="showSpare" style="width: 700px;height: 370px;background: white;position: fixed;left: 985px;top:124px;z-index: 900;border: 1px solid #F4F4F4;border-radius: 4px">
        <el-form label-width="100px" style="margin-top: 30px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="领用单号">
                        <el-input v-model="spareUseFrom.code" size="large" style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="领用类型">
                        <el-select v-model="spareUseFrom.type" size="large" style="width: 200px;">
                            <el-option label="设备保养" value="1"></el-option>
                            <el-option label="设备维修" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关联单号">
                        <el-input v-model="spareUseFrom.relatedCode" size="large" style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="领用申请人">
                        <el-select v-model="spareUseFrom.applicant" size="large" style="width: 200px;">
                            <el-option v-for="person in peopleData" :key="person.peopleManagementId" :label="person.peopleManagementName" :value="person.peopleManagementName"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="操作时间">
                        <el-date-picker v-model="spareUseFrom.operateTime" type="date" size="large" style="width: 200px;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="领用主题">
                        <el-input v-model="spareUseFrom.title" size="large" style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="工单类型">
                        <el-select v-model="spareUseFrom.workType" size="large" style="width: 200px;">
                            <el-option label="设备维修" value="2"></el-option>
                            <el-option label="设备保养" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="申请时间">
                        <el-date-picker v-model="spareUseFrom.applyTime" type="date" size="large" style="width: 200px;"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="审核状态">
                        <el-select v-model="spareUseFrom.status" size="large" style="width: 200px;">
                            <el-option label="待审核" value="1"></el-option>
                            <el-option label="驳回" value="2"></el-option>
                            <el-option label="通过" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="部门">
                        <el-select v-model="spareUseFrom.department" size="large" style="width: 200px;">
                            <el-option v-for="department in departmentData" :key="department.departmentManagementId" :label="department.departmentName" :value="department.departmentManagementId" ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="width: 100%;height: 50px;border-top: 1px solid #F4F4F4;margin-top: 0px">
            <el-button @click="showSpare =  false" style="margin-left: 20px">关闭</el-button>
            <el-button @click="empty()" style="margin-top: 10px;margin-left: 20px">清空</el-button>
            <div style="margin-left: 590px;margin-top: -28px">
                <el-button type="success" @click="selAllSpareUse">查询</el-button>
            </div>
        </div>
    </div>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    showSpare:false,
    spareUseData:[],
    spareUseFrom:{
        page:1,
        pageSize:10,
        codeName:null,
        code: null,
        type: null,
        relatedCode: null,
        applicant: null,
        operateTime: null,
        title: null,
        workType: null,
        applyTime: null,
        status: null,
        department: null
    },
    total:0,
    selection:[],
    //部门数据
    departmentData:[],
    //人员数据
    peopleData:[],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    deleteBatch(){
        let i = 0
        for (let i = 0; i < this.selection.length; i++) {
            if(this.selection[i].status == 1){
                i++
                this.$message.error('当前选中的数据包含待审核的数，不可删除');
                break;
            }
        }
        let val = []
        for (let j = 0; j < this.selection.length; j++) {
            val.push(this.selection[i].spId)
        }
        if (i == 0){
            this.request.post("/spare/spare-use/deleteBatch",val)
            .then(res=>{
                this.$message({
                    showClose: true,
                    message: '删除成功！',
                    type: 'success'
                });
                this.selAllSpareUse()
            })
        }
    },
    addSpareUse(){
        this.$router.push('/spareUseAdd')
    },
    spareUseSelection(val){
        this.selection = val
    },
    selAllSpareUse(){
        this.request.post("/spare/spare-use/selAllSpareUse",this.spareUseFrom)
        .then(res=>{
            this.spareUseData = res.data.items
            this.total = res.data.counts
        })
    },
    //分页跳转数据
    handleSizeChanges(pageSize) {
        this.spareUseFrom.pagesize = pageSize;
        this.selAllSpareUse();
    },
    //查询人员数据
    selAllPeople(){
        this.request.get("/system/people-management/selAllPeople")
            .then(res=>{
                this.peopleData = res.data
            })
    },
    //查询部门数据
    selAllDepartment(){
        this.request.get("/system/department-management/selAllDepartment")
            .then(res=>{
                this.departmentData = res.data
            })
    },
    //清空按钮
    empty(){

    },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.selAllSpareUse()
    this.selAllPeople()
    this.selAllDepartment()
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
